<template>
  <div class="nav-bar">
    <span class="nav-bar-placeholder nav-bar-left">
      <div v-if="hasBack" class="nav-bar-back" @click="goBack">
        <RiArrowLeftLine />
      </div>
    </span>
    <span class="nav-bar-title">
      <slot></slot>
    </span>
    <span class="nav-bar-placeholder nav-bar-right"></span>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import RiArrowLeftLine from '~icons/ri/arrow-left-line'

defineOptions({
  name: 'NavBar',
})

const props = defineProps({
  hasBack: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['goBack'])

const router = useRouter()

const goBack = () => {
  if (!props.hasBack) return
  router.back()
  emit('goBack')
}
</script>

<style scoped lang="scss">
.nav-bar {
  background: #38597a;
  padding: 12px 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.nav-bar-placeholder {
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-bar-back {
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-bar-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  line-height: 24px;
}
</style>
